<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Honey, 领钱啦！</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <link href="css/mui.min.css" rel="stylesheet" type="text/css" />
    <link href="css/mui.picker.css" rel="stylesheet" type="text/css" />
    <link href="css/mui.dtpicker.css" rel="stylesheet" type="text/css" />
    <link href="css/base.css" rel="stylesheet" type="text/css" />
    <link href="css/button.css" rel="stylesheet" type="text/css" />
    <link href="css/icon.css" rel="stylesheet" type="text/css" />
    <link href="css/first.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <img src="image/person-bg.png" class="person-bg-image" />
    <div class="avatar-container">
        <img src="" class="avatar-thumb" />
        <div class="avatar-mask"></div>
    </div>
    <div class="form-head">
        <img class="honey" src="image/honey.png" />
        <p>初次见面，<span class="font-red">200元</span>见面礼请收下</p>
    </div>
    <div class="form-body">
        <form action="">
            <div class="form-item">
                <span class="item-title">手机号</span>
                <a class="item-action" href="javascript:;">
                    <input type="text" name="mobile" class="control-text" placeholder="一串号码">
                    <i class="icon icon-cross mb"></i>
                </a>
            </div>
            <div class="form-item">
                <span class="item-title">验证码</span>
                <a class="item-action" href="javascript:;">
                    <span id="retry" class="action-value font-red" style="display:none;">重新发送</span>
                    <input type="text" name="valid" class="control-text" placeholder="一次认证">
                    <i class="icon icon-cross vl"></i>
                </a>
            </div>
            <div class="form-item">
                <span class="item-title">你的生日</span>
                <a class="item-action bd" href="javascript:;">
                    <input type="text" name="birthday" readonly class="control-text" placeholder="一份惦记">
                    <i class="icon icon-down"></i>
                </a>
            </div>
            <div class="form-item">
                <span class="item-title">你的职业</span>
                <a class="item-action jb" href="javascript:;">
                    <input type="text" name="job" readonly class="control-text" placeholder="一个江湖">
                    <i class="icon icon-down"></i>
                </a>
            </div>
        </form>
    </div>
    <button class="btn yellow">立即领走，Go !</button>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
    <script src="js/template.js" type="text/javascript"></script>
    <script src="js/mui.min.js" type="text/javascript"></script>
    <script src="js/mui.picker.js" type="text/javascript"></script>
    <script src="js/mui.dtpicker.js" type="text/javascript"></script>
    <script src="js/base.js" type="text/javascript"></script>
    <script type="text/javascript">
        var year = [];
        var month = [];
        var day = [];
        var date = (new Date()).getFullYear();
        for (var i = 1900; i <= date; i++) {
            year.push({
                value: i,
                text: i + '年'
            });
        }

        for (var i = 1; i <= 12; i++) {
            month.push({
                value: i,
                text: i + '月'
            });
        }

        for (var i = 1; i <= 31; i++) {
            day.push({
                value: i,
                text: i + '日'
            });
        }

        var dtpicker = new mui.DtPicker({
            type: "date",
            title: '我不会告诉你生日有惊喜',
            bottom: true,
            beginDate: new Date(1900, 01, 01),
            endDate: new Date(date, 12, 31),
            customData: {
                y: year,
                m: month,
                d: day
            }
        });

        $(function() {
            bee.wxConfig(function() {
                bee.hideAllNonBaseMenuItem();
            }, function(res) {});

            var height = $('.person-bg-image').height();
            $('.avatar-container').css('margin-top', height - 60);
            $('.process-info .process-left').css('width', 30 + '%');
            $('.process-info .process-right').css('width', 68 + '%');

            init();
            initEvent();

            function init() {
                $('[name="job"]').val(bee.cache('job'));
                $('[name="mobile"]').val(bee.cache('mobile'));
                $('[name="valid"]').val(bee.cache('valid'));
                $('[name="birthday"]').val(bee.cache('birthday'));

                bee.request({
                    url: '/Member/Index/index',
                    data: null,
                    success: function(data) {
                        $('.avatar-thumb').attr('src', data.info.logo);
                    }
                });
            }

            function initEvent() {
                $('body').on('click', '.jb', function() {
                    bee.cache('mobile', $('[name="mobile"]').val());
                    bee.cache('valid', $('[name="valid"]').val());
                    bee.cache('birthday', $('[name="birthday"]').val());
                    bee.putHis(document.URL);
                    bee.open('job.html');
                });

                $('body').on('click', '.mb', function() {
                    $('[name="mobile"]').val('');
                });

                $('body').on('click', '.bd', function() {
                    dtpicker.show(function(e) {
                        $('[name="birthday"]').val(e.value);
                    })
                });

                $('body').on('click', '.vl', function() {
                    $('[name="valid"]').val('');
                });

                var time = 60;
                $('body').on('focus', '[name="valid"]', function() {
                    if (time !== 60) {
                        return;
                    }
                    var dom = $(this);
                    var mobile = $('[name="mobile"]').val();
                    if (mobile === '' || mobile.length !== 11) {
                        alert('手机号不正确');
                        return;
                    }
                    var timer = setInterval(function() {
                        if (time < 1) {
                            $('#retry').show();
                            dom.hide();
                            clearInterval(timer);
                            time = 60;
                            return;
                        }
                        dom.attr('placeholder', time + 's');
                        time--;
                    }, 1000);
                    bee.request({
                        url: '/Index/Index/send',
                        data: {
                            mobile: mobile
                        },
                        success: function(result) {

                        }
                    });
                });

                $('body').on('click', '#retry', function() {
                    $(this).hide();
                    $('[name="valid"]').show().trigger('focus');
                });

                $('body').on('click', '.btn', function() {
                    var data = {};
                    data.mobile = $('[name="mobile"]').val();
                    data.verification = $('[name="valid"]').val();
                    data.birthday = $('[name="birthday"]').val();
                    data.occupation = bee.cache('job_id');
                    bee.request({
                        url: '/Member/Index/update_user',
                        data: data,
                        success: function(result) {
                            bee.open('entrance.html');
                        }
                    });
                });
            }
        });
    </script>
</body>

</html>
